﻿var dashBoardModel = new function () {

    this.ProductList = ko.observableArray(data.ProductList != null ? data.ProductList : []);
    this.HideCalendar = ko.observable(false);
    var nowUpdate = new Date().toLocaleString().split(' ');
    this.TimeEvent = ko.observable(data.CurrentDate);
    var StartNow = new Date();
    this.onDateSelected = ko.observable((StartNow.getMonth() + 1) + "/" + StartNow.getDate() + "/" + StartNow.getFullYear());
    this.visiblecalendar = ko.observable(true);
    this.visibletoolbar = ko.observable(true);
    this.visiblepanel = ko.observable(true);
    this.visibleListUser = ko.observable(true);

    $(document).on("change", "#calendar", function () {
        dashBoardModel.onDateSelected($(this).val());

        // Build a function to get data        
        var data = { "startDate": $(this).val() };
        $.post("/MyAccount/Dashboard/GetProduct", data, function (model) {
            dashBoardModel.ProductList(model.ProductList);
            dashBoardModel.TimeEvent(model.CurrentDate);
        });
    })


    this.expCalendar = function () {
        //alert(this.visibletoolbar());
        if (this.visiblecalendar()) {
            this.visiblecalendar(false);
            this.visibletoolbar(false);
            this.visiblepanel(false);
            $('#expDashboardCalendar').removeAttr("expander");
            $('#expDashboardCalendar').attr("class", "unexpander");

            $('#expDashboardEvent').removeAttr("expander");
            $('#expDashboardEvent').attr("class", "unexpander");
        }
        else {
            this.visiblecalendar(true);
            this.visibletoolbar(true);
            this.visiblepanel(true);
            $('#expDashboardCalendar').removeAttr("unexpander");
            $('#expDashboardCalendar').attr("class", "expander");

            $('#expDashboardEvent').removeAttr("unexpander");
            $('#expDashboardEvent').attr("class", "expander");
        }
    }
    this.expEvent = function () {
        //alert(this.visibletoolbar());
        if (this.visiblecalendar()) {
            this.visiblecalendar(false);
            this.visibletoolbar(false);
            this.visiblepanel(false);
            $('#expDashboardCalendar').removeAttr("expander");
            $('#expDashboardCalendar').attr("class", "unexpander");

            $('#expDashboardEvent').removeAttr("expander");
            $('#expDashboardEvent').attr("class", "unexpander");
        }
        else {
            this.visiblecalendar(true);
            this.visibletoolbar(true);
            this.visiblepanel(true);
            $('#expDashboardCalendar').removeAttr("unexpander");
            $('#expDashboardCalendar').attr("class", "expander");

            $('#expDashboardEvent').removeAttr("unexpander");
            $('#expDashboardEvent').attr("class", "expander");
        }
    }
};

var leadFlowModel = new function () {

    this.TimeUpdate = ko.observable(data.LastUpdated);
    this.FlowName = ko.observable("Danh mục");
    this.CategoryList = ko.observableArray(data.CategoryList);
    this.setcreoll = ko.observable("scroll");
    this.visibletoolbar = ko.observable(true);
    this.visibleflow = ko.observable(true);
    this.maxFlow = ko.observable(50);
    this.ItemsOnPage = ko.computed(function () {
        return this.CategoryList().slice(0, this.maxFlow());
    }, this);

    this.showCampaign = function () {
        leadFlowModel.FlowName("Tỉnh thành");
        leadFlowModel.CategoryList(data.StateList);
        leadFlowModel.maxFlow(data.StateList.length);
        $("#currentStatus").removeAttr("class");
        $("#currentStatus").attr("class", "area button");
        $("#currentCampaign").removeAttr("class");
        $("#currentCampaign").attr("class", "area button current");

    }
    this.showStatus = function () {
        leadFlowModel.FlowName("Danh mục");
        leadFlowModel.CategoryList(data.CategoryList);
        leadFlowModel.maxFlow(data.CategoryList.length);
        $("#currentStatus").removeAttr("class");
        $("#currentStatus").attr("class", "area button current");
        $("#currentCampaign").removeAttr("class");
        $("#currentCampaign").attr("class", "area button");
    }

    this.refreshFlow = function () {
        $.post("/MyAccount/Dashboard/ProductFolow", function (data) {
            if ($("#currentStatus").attr("class") == "area button current") {
                leadFlowModel.FlowName("Danh mục");
                leadFlowModel.CategoryList(data.CategoryList);
            }
            else {
                leadFlowModel.FlowName("Tỉnh/thành");
                leadFlowModel.CategoryList(data.StateList);
            }

            leadFlowModel.TimeUpdate(data.LastUpdated);

        });
        return false;
    }

    this.crollExp = function () {
        if (!this.visibletoolbar()) {
            this.visibletoolbar(true);
            this.visibleflow(true);
        }

        if (this.setcreoll() == "scroll") {
            this.setcreoll("");
        }
        else {
            this.setcreoll("scroll");
        }
    }
    this.expFlow = function () {
        //alert(this.visibletoolbar());
        if (this.visibletoolbar()) {
            this.visibletoolbar(false);
            this.visibleflow(false);
            $('#expDashboardFlow').removeAttr("expander");
            $('#expDashboardFlow').attr("class", "unexpander");
        }
        else {
            this.visibletoolbar(true);
            this.visibleflow(true);
            $('#expDashboardFlow').removeAttr("unexpander");
            $('#expDashboardFlow').attr("class", "expander");
        }
    }
};

ko.applyBindings(dashBoardModel, document.getElementById("firstStep"));
ko.applyBindings(leadFlowModel, document.getElementById("threeStep"));
// Set CurrentDatetime for it
$('#startDate').blur(function () {
    setTimeout(function () {
        if (!isDateTime($('#startDate').val())) {
            $('#startDate').val(getCurrentDate());
        }
    }, 1);
});

$('#endDate').blur(function () {
    setTimeout(function () {
        if (!isDateTime($('#endDate').val())) {
            $('#endDate').val(getCurrentDate());
        }
    }, 1);
});

// Check datetime
function isDateTime(a) {
    var a = new Date(a);
    return ($.isNumeric(a.getTime()));
}